<template>
  <el-breadcrumb class="app-breadcrumb" separator-class="el-icon-d-arrow-right">
    <span style="color: white" class="font-weight-bold">当前位置 ：</span>
    <transition-group name="breadcrumb" style="color:white;">
      <el-breadcrumb-item v-for="(item) in levelList" :key="item.path">
        <span class="text-black">{{ item.meta.title }}</span>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
export default {
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route(route) {
      if (route.path.startsWith('/redirect/')) {
        return
      }
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      this.levelList = matched.filter(item => item.meta && item.meta.title)
    },
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 15px;
  // line-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  img {
    margin-right: -20px;
  }
}

/deep/ .el-breadcrumb__inner {
  color: white !important;
  padding: 8px 15px;
  //background: #f5f6fa;
}

/deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #fff;
}

/deep/ .el-breadcrumb__separator{
  color: #fff;
}


.app-breadcrumb.el-breadcrumb::before, .app-breadcrumb.el-breadcrumb::after {
  display: none;
}
</style>
